<%-- 
    Document   : home
    Created on : 08-12-2014, 15:28:01
    Author     : Rodrigo
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>

<!DOCTYPE html>
<html>
    <head>
        <title>Epraxis - Home</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minumum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="${contextPath}/css/font-awesome.min.css">
        <link rel="stylesheet" href="${contextPath}/css/epraxis.css">
        <style type="text/css">
        </style>
    </head>
    <body class="body">
        <c:import url="/app/commons/Menu.view"/>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <h3>Lista de cursos disponibles</h3>
                    <hr>
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <c:forEach var="cursoAsignado" items="${listaCursoAsignado}" varStatus="statusCurso">
                            <div class="panel panel-default">
                                <div class="panel-heading bg-white" role="tab" id="headingOne">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne${cursoAsignado.id}" aria-expanded="true" aria-controls="collapseOne${cursoAsignado.id}">
                                            <h4 class="list-group-item-heading"><strong>${cursoAsignado.nombre}</strong></h4>
                                            <p class="list-group-item-text color-gray font-size-12">${cursoAsignado.descripcion}</p>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne${cursoAsignado.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                                    <div class="panel-body padding-zero">
                                        <div class="panel-group panel-unidad" id="subAccordion${cursoAsignado.id}" role="tablist" aria-multiselectable="true">
                                            <c:forEach var="unidad" items="${mapaCursoUnidad.get(cursoAsignado)}" varStatus="statusUnidad">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading panel-unidad" role="tab" id="headingTwo${curso.id}${unidad.id}">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#subAccordion${cursoAsignado.id}" href="#collapseTwo${cursoAsignado.id}${unidad.id}" aria-expanded="true" aria-controls="collapseTwo${cursoAsignado.id}${unidad.id}">
                                                                <small>Unidad ${statusUnidad.count} - <b>${unidad.nombre}</b></small>
                                                                <hr>
                                                                <h4 class="list-group-item-heading font-size-14"></h4>
                                                                <p class="list-group-item-text color-gray font-size-11">${unidad.descripcion}</p>
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseTwo${cursoAsignado.id}${unidad.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo${curso.id}${unidad.id}">
                                                        <div class="panel-body padding-zero">
                                                            <ol class="list-group">
                                                                <c:forEach var="capitulo" items="${mapaUnidadCapitulo.get(unidad)}" varStatus="statusCapitulo">
                                                                    <a href="#" class="list-group-item boton-capitulo" onclick="cargarCapitulo(this, '${cursoAsignado.id}', '${unidad.id}', '${capitulo.id}', '${statusUnidad.count}', '${statusCapitulo.count}');">
                                                                        <span class="h5 color-lightgray font-size-12">Capitulo ${statusUnidad.count}.${statusCapitulo.count}:</span>
                                                                        <strong>${capitulo.nombre}</strong>  
                                                                        <c:choose>
                                                                            <c:when test="${capitulo.descripcion != null && !capitulo.descripcion.isEmpty()}">
                                                                                <br>${capitulo.descripcion}  
                                                                            </c:when>
                                                                            <c:otherwise>
                                                                                <br><i>(Sin descripción)</i>
                                                                            </c:otherwise>
                                                                        </c:choose>
                                                                    </a>
                                                                </c:forEach>
                                                            </ol>
                                                        </div>
                                                    </div>
                                                </div>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                        </c:forEach>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="panel panel-default bg-transparent no-border">
                        <div class="panel-body padding-zero">
                            <iframe id="iframeVerCurso" src="" height="600" class="border-radius-20"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="${contextPath}/js/jquery-2.1.1.js"></script>
        <script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="${contextPath}/js/epraxis.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#iframeVerCurso').load(function() {
                    resizeIframe($('#iframeVerCurso'));
                    $('iframeVerCurso').addClass('border-gray');
                });
            });

            function cargarCapitulo(object, curso, unidad, capitulo, numeroUnidad, numeroCapitulo) {
                $('.boton-capitulo').removeClass('active');
                $(object).addClass('active');
                var url = '${contextPath}/app/curso/VerCursoDisplay.view?curso=' + curso + '&unidad=' + unidad + '&capitulo=' + capitulo + '&numeroUnidad=' + numeroUnidad + '&numeroCapitulo=' + numeroCapitulo;
                $('#iframeVerCurso').attr('src', url);
            }

        </script>
    </body>
</html>